<template>
  <div class="user-info">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>用户信息</span>
        <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
      </div>
      <div v-for="(item, key) of userInfo" :key="o" class="text item">
        <span class="key">{{ key }}</span>
        <span class="value">{{ item }}</span>
      </div>
    </el-card>
  </div>
</template>

<script>
import store from "@/store";
import {getToken} from "@/utils/auth";

export default {
  name: "UserInfo",
  data() {
    return {}
  },
  computed: {
    userInfo() {
      let user = store.state.user
      return {
        token: user.token,
        name: user.name,
        avatar: user.avatar,
        introduction: user.introduction,
        roles: user.roles,
        id: user.id,
        qq: user.qq,
        tgroup: user.tgroup,
        phone: user.phone,
        grade: user.grade,
      }
    }
  }
}
</script>

<style scoped lang="scss">
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.user-info {
  font-size: 20px;
  line-height: 25px;
  .key {
    //background-color: #ffffff;
    //border-radius: 5px;
    padding: 2px;
    margin: 2px 3px;
    color: #6583db;
  }

  .value {

  }
}
</style>
